<template>
<div class="good-cate-box">
  <!--面包屑-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <!--角色列表-->
  <el-row>
    <el-card>
      <!--添加角色-->
      <el-row class="m-b">
        <el-button  type="primary" @click="showAddCateDialog">添加分类</el-button>
      </el-row>
      <!--角色列表表格-->
      <tree-table
        :data="CateList"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        :show-index="true"
        index-text="#"
        :border="true"
      >
        <!--是否有效作用域-->
        <template v-slot:cat_deleted="scope">
        <i v-if="scope.row.cat_deleted" class="el-icon-error"></i>
        <i v-else class="el-icon-success"></i>
      </template>
        <!--分类层级-->
        <template v-slot:cat_level="scope">
          <el-tag v-if="scope.row.cat_level=== 0">一级</el-tag>
          <el-tag type="success" v-if="scope.row.cat_level=== 1">二级</el-tag>
          <el-tag type="warning" v-if="scope.row.cat_level=== 2">三级</el-tag>
        </template>
        <!--操作列-->
        <template v-slot:cateOp="scope">
          <!--编辑用户信息-->
          <el-button type="primary" icon="el-icon-edit" size="medium"
                     @click="editCate(scope.row.cat_id)"></el-button>
          <!--删除用户信息-->
          <el-button type="danger" icon="el-icon-delete" size="medium"
                     @click="deleteCate(scope.row.cat_id)"></el-button>
          <!--权限分配-->
        </template>
      </tree-table>
      <!--分页区域-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--添加分类对话框-->
      <el-dialog
        title="添加分类"
        :visible.sync="addCateDialogVisible"
        :close-on-click-modal="false"
        @close="addCateClose"
        width="50%">
        <div class="add-cate-box">
          <el-form :model="addCateInfo"
                   :rules="addCateInfoRules"
                   ref="addCateInfoRef"
                   label-width="120px"
                   class="demo-ruleForm"
          >
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="addCateInfo.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
            <!-- options 指定数据元-->
            <!-- props 指定级联选择配置对象 labe-->
              <el-cascader
                props.expandTrigger='hover'
                v-model="selectId"
                :options="CateSelectList"
                :props="cascaderProps"
                @change="cateChange"
                :popper-append-to-body="false"
                clearable
              >
              </el-cascader>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addCateDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="AddCate">确 定</el-button>
        </span>
        </el-dialog>
        <!--编辑分类信息对话框-->
      <el-dialog
        title="编辑分类操作"
        :visible.sync="editCatedialogVisible"
        :close-on-click-modal="false"
        width="50%"
        >
        <div class="edit-cate-box">
          <el-form :model="cateDetail"
                   :rules="addCateInfoRules"
                   ref="editCateInfoRef"
                   label-width="120px"
                   class="demo-ruleForm"
          >
            <el-form-item label="分类名称" prop="cat_name">
              <el-input v-model="cateDetail.cat_name"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editCatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updataCateInfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </el-row>
</div>
</template>

<script>
export default {
  name: 'cate',
  data(){
    return {
      CateList: [],
      CateSelectList: [],
      // 总共多少条数据
      total: 0,
      // 请求参数
      queryInfo: {
        type: 3,
        // 当前页码
        pagenum: 1,
        // 每页显示几条数据
        pagesize: 10
      },
      // tree-table指定表格的列
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          width: '100px',
          //作用域插槽
          type: 'template',
          template: 'cat_deleted',
        },
        {
          label: '类别层级',
          prop: 'cat_level',
          type: 'template',
          template: 'cat_level',
          width: '200px',
        },
        {
          label: '操作',
          prop: 'cateOp',
          minWidth: '200px',
          type: 'template',
          template: 'cateOp',
          width: '200px',
        },
      ],
      // 添加分类对话框显示
      addCateDialogVisible: false,
      addCateInfo:{
        // 新增分类名称
        cat_name: '',
        // 父级分类id
        cat_pid: 0,
        // 将要添加分类等级，默认为一级
        cat_level: 0,
      },
      cascaderProps:{
        label: 'cat_name',
        value: 'cat_id',
        children: 'children',
        checkStrictly: true
      },
      // 选中id的数组
      selectId: [],
      // 新增分类层级
      setLevel:'',
      // 编辑用户信息规则
      addCateInfoRules: {
        cat_name: [
          {required: true, message: '请输入分类名称', trigger: 'blur'},
          {min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur'}
        ]
      },
      // 分类信息对话框显示
      editCatedialogVisible: false,
      // 根据id查询分类信息
      cateDetail:{
        "cat_id": 0,
        "cat_name": "",
        "cat_pid": 0,
        "cat_level": 0
      }
    }
  },
  created() {
    this.getCateList()
  },
  methods:{
    async getCateList() {
      const {data: res} = await this.$http.get(`categories`,{params: this.queryInfo})
      if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.CateList = res.data.result
      this.total = res.data.total
    },
    // 添加分类显示对话框
    showAddCateDialog() {
      // 获取父级分类的数据列表
      this.getFirstSecondCateList()
      this.addCateDialogVisible = true
    },
    // 添加类别
    async AddCate(){
      // 必填项预验证
      this.$refs.addCateInfoRef.validate( async (valid)=>{
        if(!valid) return false
        const {data: res} = await this.$http.post(`categories`, this.addCateInfo)
        if(res.meta.status !== 201) return this.$message.error(res.meta.msg)
        // 添加成功隐藏弹窗
        this.addCateDialogVisible = false
        this.$refs.addCateInfoRef.resetFields()
        // 添加成功 重新获取分类信息
        this.getCateList()
        // 添加成功 提示添加成功
        this.$message.success(res.meta.msg)
      })
    },
    // 获取所有一级、二级类别
    async getFirstSecondCateList(){
    const {data: res} = await this.$http.get(`categories`, {params: {type: 2}})
      if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.CateSelectList = res.data
    },
    // 级联选择器事件
    cateChange(value) {
      console.log('级联选择器修改事件',value);
      console.log('级联选择器修改事件',this.selectId)
      if(this.selectId.length !== 0){
        if(this.selectId.length === 1){
          this.addCateInfo.cat_pid = this.selectId[0]
          this.addCateInfo.cat_level = 1
        }
        if(this.selectId.length === 2){
          this.addCateInfo.cat_pid = this.selectId[1]
          this.addCateInfo.cat_level = 2
        }
      }else{
        this.addCateInfo.cat_pid = 0
      }
      console.log('分类id数组', this.selectId[0])
      console.log('分类提交信息', this.addCateInfo)
    },
    // 对话框的关闭事件监听
    addCateClose(){
      // 重置文本框内容
      this.$refs.addCateInfoRef.resetFields()
      // 重置级联选择器
      // 父级分类id
      this.addCateInfo.cat_pid= 0
      // 将要添加分类等级，默认为一级
     this.addCateInfo.cat_level= 0
     // 清空级联选择器id数组
      this.selectId = []
    },
    // 修改每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val
      this.getCateList()
    },
    // 修改显示第几页数据
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val
      this.getCateList()
    },
    // 编辑类别
    async editCate(id) {
      console.log(`编辑类别: ${id}`)
      const {data: res} = await this.$http.get(`categories/${id}`)
      if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cateDetail = res.data
      this.editCatedialogVisible = true
    },
    // 更新分类信息
    async updataCateInfo(){
      this.$refs.editCateInfoRef.validate(async (valid)=>{
        if(!valid) return false
        const {data: res} = await this.$http.put(`categories/${this.cateDetail.cat_id}`, {cat_name: this.cateDetail.cat_name})
        if(res.meta.status !== 200) return this.$message.error(res.meta.msg)
        this.editCatedialogVisible = false
        this.getCateList()
        this.$message.success(res.meta.msg)
      })
    },
    // 删除类别
    async deleteCate(id) {
      console.log(`删除类别: ${id}`);
      // 弹窗提示 确定 confirm 取消 cancel
      const deleteOp = await this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err)=>{
        return err
      })
      console.log('确认框提示', deleteOp)
      if(deleteOp !=='confirm'){
        return this.$message.info('已经取消删除分类')
      }
      const {data: res} = await this.$http.delete(`categories/${id}`)
      if(res.meta.status !== 200) return this.$message.error('删除分类失败！')
      // 重新请求分类数据
      this.getCateList()
      // 删除操作结果
      this.$message.success('删除分类成功！')
    }
  }
}
</script>

<style lang="scss">
.zk-table{
  font-size: 14px;
  color: #606266;
}
.el-icon-success{
  color: green;
}
.el-icon-error{
  color: #999999;
}
.m-b{
  margin-bottom: 15px;
}
.el-cascader{
  width: 100%;
}
.el-scrollbar.el-cascader-menu{
  height: 300px !important;
}
//.el-scrollbar/deep/.el-cascader-menu{
//  height: 300px !important;
//}
::v-deep .el-cascader-panel{
  height: 300px !important;
}
</style>

